<template>
  <div class="login">
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">Data Cloud 管理系统</h3>
      <el-form-item v-if="tenantEnabled" prop="tenantId">
        <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName"
            :value="item.tenantId"></el-option>
          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
        </el-select>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
          @keyup.enter="handleLogin">
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="captchaEnabled" prop="code">
        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
          @keyup.enter="handleLogin">
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" class="login-code-img" @click="getCode" />
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
      <!-- <el-form-item style="float: right">
        <el-button circle title="微信登录" @click="doSocialLogin('wechat')">
          <svg-icon icon-class="wechat" />
        </el-button>
        <el-button circle title="MaxKey登录" @click="doSocialLogin('maxkey')">
          <svg-icon icon-class="maxkey" />
        </el-button>
        <el-button circle title="TopIam登录" @click="doSocialLogin('topiam')">
          <svg-icon icon-class="topiam" />
        </el-button>
        <el-button circle title="Gitee登录" @click="doSocialLogin('gitee')">
          <svg-icon icon-class="gitee" />
        </el-button>
        <el-button circle title="Github登录" @click="doSocialLogin('github')">
          <svg-icon icon-class="github" />
        </el-button>
      </el-form-item> -->
      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div v-if="register" style="float: right">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2018-2024 Data Cloud All Rights Reserved.</span>
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog v-model="state.bindQrcodeDialogVisible" :close-on-click-modal="false" :show-close="true" :width="500"
      title="设置动态口令认证" @close="state.twiceAuthCodeDialogVisible=true">
      <div class="auth-area">
        <div class="auth-tittle">扫码绑定（使用Google、微软身份验证器APP扫码）</div>
        <div class="auth-code">
          <img :src="state.qrCodeUrl" class="auth-code-img" />
        </div>
        <div class="auth-tips">
          <span>提示：请使用“Google、微软身份验证器APP”绑定，各大软件商店均可下载该APP，支持安卓、IOS系统。</span>
        </div>
        <div class="auth-tips-red">
          <span>开启服务后，请立即使用“Google、微软身份验证器APP”绑定，以免出现无法登录的情况。</span>
        </div>
        <!--      <div class="auth-botton">-->
        <!--        <el-button size="large" style="width: 100%;" type="primary" @click="goTwiceAuth"> 确认已保存，继续操作将绑定该密钥！ </el-button>-->
        <!--      </div>-->
      </div>
    </el-dialog>
    <!-- 谷歌验证 -->
    <el-dialog v-model="state.twiceAuthCodeDialogVisible" :width="500" title="动态口令认证">
      <div class="auth-area1">
        <div class="auth-tips1">管理员已开启动态口令认证</div>
        <div class="auth-input">
          <el-input v-model="state.twiceAuthCode" :max="999999" :maxlength="6" auto-complete="off" placeholder="请输入动态口令"
            size="large" style="width: 100%;" type="number"></el-input>
        </div>
        <div class="auth-botton">
          <el-button size="large" style="width: 100%;" type="primary" @click="twiceAuthSubmit">验证</el-button>
        </div>

        <div class="auth-tips2"><span>提示：请使用微软、谷歌认证器获取验证码。</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { getCodeImg, getTenantList, generateAuthUrl, twiceAuth, saveSecretKey } from '@/api/login';
  import { authBinding } from '@/api/system/social/auth';
  import { useUserStore } from '@/store/modules/user';
  import { LoginData, TenantVO } from '@/api/types';
  import { to } from 'await-to-js';
  import { HttpStatus } from '@/enums/RespEnum';
  import qrcode from 'qrcode';
  const userStore = useUserStore();
  const router = useRouter();

  const loginForm = ref<LoginData>({
    tenantId: '000000',
    username: 'admin',
    password: 'admin123',
    rememberMe: false,
    code: '',
    uuid: ''
  } as LoginData);

  const loginRules : ElFormRules = {
    tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
  };

  const codeUrl = ref('');
  const loading = ref(false);
  // 验证码开关
  const captchaEnabled = ref(true);
  // 租户开关
  const tenantEnabled = ref(true);

  // 注册开关
  const register = ref(false);
  const redirect = ref(undefined);
  const loginRef = ref<ElFormInstance>();
  // 租户列表
  const tenantList = ref<TenantVO[]>([]);

  watch(
    () => router.currentRoute.value,
    (newRoute : any) => {
      redirect.value = newRoute.query && newRoute.query.redirect;
    },
    { immediate: true }
  );

  const handleLogin = () => {
    loginRef.value?.validate(async (valid : boolean, fields : any) => {
      if (valid) {
        loading.value = true;
        // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
        if (loginForm.value.rememberMe) {
          localStorage.setItem('tenantId', String(loginForm.value.tenantId));
          localStorage.setItem('username', String(loginForm.value.username));
          localStorage.setItem('password', String(loginForm.value.password));
          localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
        } else {
          // 否则移除
          localStorage.removeItem('tenantId');
          localStorage.setItem('username', String(loginForm.value.username));
          localStorage.removeItem('password');
          localStorage.removeItem('rememberMe');
        }
        // 调用action的登录方法
        const [err, res] = await to(userStore.login(loginForm.value));
        console.log(err, res)

        if (!err) {
          // 二次验证0 未开启 1 未绑定  2  已绑定
          if (res.data.googleAuth == 0) {
            const redirectUrl = redirect.value || '/';
            await router.push(redirectUrl);
            loading.value = false;
          } else if (res.data.googleAuth == 1) {
            return getAuthQr();
          } else if (res.data.googleAuth == 2) {
            return state.twiceAuthCodeDialogVisible = true
          }
        } else {
          loading.value = false;
          // 重新获取验证码
          if (captchaEnabled.value) {
            await getCode();
          }
        }
      } else {
        console.log('error submit!', fields);
      }
    });
  };

  /**
   * 获取验证码
   */
  const getCode = async () => {
    const res = await getCodeImg();
    const { data } = res;
    captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + data.img;
      loginForm.value.uuid = data.uuid;
    }
  };

  const getLoginData = () => {
    const tenantId = localStorage.getItem('tenantId');
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    const rememberMe = localStorage.getItem('rememberMe');
    loginForm.value = {
      tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
      username: username === null ? String(loginForm.value.username) : username,
      password: password === null ? String(loginForm.value.password) : String(password),
      rememberMe: rememberMe === null ? false : Boolean(rememberMe)
    } as LoginData;
  };

  /**
   * 获取租户列表
   */
  const initTenantList = async () => {
    const { data } = await getTenantList();
    tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
    if (tenantEnabled.value) {
      tenantList.value = data.voList;
      if (tenantList.value != null && tenantList.value.length !== 0) {
        loginForm.value.tenantId = tenantList.value[0].tenantId;
      }
    }
  };

  /**
   * 第三方登录
   * @param type
   */
  const doSocialLogin = (type : string) => {
    authBinding(type, loginForm.value.tenantId).then((res : any) => {
      if (res.code === HttpStatus.SUCCESS) {
        // 获取授权地址跳转
        window.location.href = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    });
  };

  const state = reactive({
    bindQrcodeDialogVisible: false,
    twiceAuthCodeDialogVisible: false,
    twiceAuthCode: '',
    qrCodeUrl: '',
    secretKey: ''
  });


  /**
   * 获取二维码
   */
  const getAuthQr = async () => {
    const res = await generateAuthUrl();
    generateQrCode(res.msg);
    console.log('获取二维码：获取到的res', res);
    console.log('获取二维码：qrCodeUrl', state.qrCodeUrl);

    // res.msg 示例： "otpauth://totp/%E9%9B%A8%E6%B8%85%E7%A7%91%E6%8A%80%3Alqq?secret=6WJJZOXAOHBY3T62YHQVJAUMMVGDTKCD&issuer=%E9%9B%A8%E6%B8%85%E7%A7%91%E6%8A%80"
    // 从res.msg取出 secret 并存下来
    const secret = res.msg.split('secret=')[1].split('&')[0];
    console.log('获取到的secret', secret);
    state.secretKey = secret;
    // 
    // secretKey.value = JSON.parse(res.msg).secret;
    // console.log('获取到的secretKey', secretKey);
    saveSecretKey({
      secretKey: secret
    })
  };

  /**
   * 生成二维码
   * param secret
   */
  const generateQrCode = async (secret : string) => {
    const data = await qrcode.toDataURL(secret);
    state.qrCodeUrl = data;
    console.log('生成base64格式的二维码：qrCodeUrl', state.qrCodeUrl);
    state.bindQrcodeDialogVisible = true;
    console.log(state)
  }
  /**
   * twiceAuth
   * 二次确认提交按钮
   */

  const twiceAuthSubmit = () => {
    console.log('二次确认提交按钮', state.twiceAuthCode);
    if (state.twiceAuthCode.length !== 6) {
      console.log('二次确认输入的值长度不正确');
      ElMessage.error('请输入6位正确的动态口令！')
      return;
    }
    twiceAuth({
      code: state.twiceAuthCode
    }).then((res) => {
      console.log('二次确认：res', res);
      if (res.code == 200) {
        console.log('二次确认成功');
        // 存储 认证成功后的新 token 到浏览器缓存
        const redirectUrl = redirect.value || '/';
        router.push(redirectUrl);
      } else {
        console.log('二次确认失败');
        ElMessage.error('二次确认失败')
      }
    }).catch(() => {
      console.log('二次确认失败');
      ElMessage.error('二次确认失败')
    })
  }
  onMounted(() => {
    getCode();
    initTenantList();
    getLoginData();
  });
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url('../assets/images/login-background.jpg');
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #fff;
  }

  .login-form {
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.8);
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 40px;

      input {
        height: 40px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 0px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 40px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial, serif;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 40px;
    padding-left: 12px;
  }

  .auth-code-img {
    height: 100%;
    padding-left: 12px;
  }

  .auth-area {
    padding: 20px;

  }

  .auth-area1 {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .auth-tittle {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .auth-code {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .auth-tips {
    margin-top: 16px;
    color: #777;

  }

  .auth-tips1 {
    margin-bottom: 16px;
    color: #a0cfff;
    font-size: 18px;
    text-align: center;
  }

  .auth-tips2 {
    margin-top: 26px;
    color: #79bbff;
    font-size: 12px;
    text-align: left;
  }

  .auth-tips-red {
    margin-top: 6px;
    color: #53a8ff;
  }

  .auth-input {
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .auth-botton {
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
</style>